<template>
    <div class="login-page-container">
        <div class="login-panel">
            <div class="title">
                <h1>百事音乐</h1>
            </div>
            <div class="login-form">
                <n-input
                    class="input"
                    v-model:value="username"
                    placeholder="用户名"
                />
                <n-input
                    class="input"
                    placeholder="密码"
                    v-model:value="password"
                    type="password"
                />
                <n-button block ghost color="#47b27c" @click="handleLogin"
                    >登录</n-button
                >
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineComponent, onMounted, nextTick } from "vue";
import { useStore } from "vuex";
import { login } from "@/api/modules/auth";
import { AxiosResponse } from "axios";
import { useRouter } from "vue-router";
import { NInput, NButton } from "naive-ui";
const store = useStore();
const router = useRouter();

const username = ref("rambler");
const password = ref("1501719577");

type AuthResponse = {
    id: string;
    isAdmin: boolean;
    lastFMApiKey: string;
    name: string;
    subsonicSalt: string;
    subsonicToken: string;
    token: string;
    username: string;
};

const handleLogin = function () {
    login({
        username: username.value,
        password: password.value,
    })
        .then((res: AxiosResponse<AuthResponse>) => {
            store.dispatch("user/updateUserInfo", res.data).then(() => {
                router.push("/welcome");
            });
        })
        .catch((e) => {
            alert(e.msg.error);
        });
};

onMounted(async () => {
    await nextTick();

    const container = document.querySelector(".login-page-container");
    container?.addEventListener("keydown", (e: any) => {
        if (e.key == "Enter") {
            handleLogin();
        }
    });
});

defineComponent({
    component: {
        NInput,
        NButton,
    },
});
</script>
<style lang="less" scoped>
.login-page-container {
    width: 100%;
    height: 100%;
    background: url("../assets/login_bg.jpg");
    background-size: cover;
    .login-panel {
        box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.08),
            0 3px 6px 0 rgba(0, 0, 0, 0.06), 0 5px 12px 4px rgba(0, 0, 0, 0.04);
        border-radius: 15px;
        width: 600px;
        height: 400px;
        background-color: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        .title {
            margin: 40px auto;
            color: #47b27c;
            font-size: 30px;
            text-align: center;
            h1 {
                width: 130px;
                display: inline-block;
                border-bottom: 5px solid #47b27c;
                padding-bottom: 12px;
            }
        }
        .login-form {
            margin: auto;
            width: 400px;
            .input {
                margin-bottom: 30px;
            }
        }
    }
}
</style>
